<template>
  <div class="resume-app">
    <!-- 导航栏 -->
    <el-header class="header">
      <div class="logo">
        <h1>个人简历制作系统</h1>
      </div>
      <el-menu
          :default-active="activeIndex"
          class="menu"
          mode="horizontal"
          @select="handleSelect"
      >
        <el-menu-item index="1">我的简历</el-menu-item>
        <el-menu-item index="2">制作简历</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="container">
        <!-- 我的简历页面 -->
        <div v-if="activeIndex == 1" class="resume-view">
          <el-card class="resume-card">
            <div class="resume-header">
              <h2>{{ resume.name }}</h2>
              <p class="resume-title">求职意向：{{ resume.jobIntention || '未填写' }}</p>
            </div>

            <div class="resume-content">
              <!-- 基本信息 -->
              <div class="section">
                <h3>基本信息</h3>
                <div class="info-row">
                  <span>姓名：{{ resume.name ? resume.name : '未填写' }}</span>
                  <!-- 性别，如果为null，则显示未填写， 1为男，2为女使用三元运算符 -->
                   <span>{{ resume.gender ? resume.gender === 1 ? '男' : '女' : '未填写' }}</span>
                </div>
                <div class="info-row">
                  <span>电话：{{ resume.phone || '未填写' }}</span>
                  <span>邮箱：{{ resume.email || '未填写' }}</span>
                </div>
                <div class="info-row">
                  <span>出生日期：{{ resume.birthDate || '未填写' }}</span>
                  <span>地址：{{ resume.address || '未填写' }}</span>
                </div>
              </div>

              <!-- 教育背景 -->
              <div class="section">
                <h3>教育背景</h3>
                <div v-if="resume.education && resume.education.length > 0" v-for="(edu, index) in resume.education" :key="index" class="edu-item">
                  <div class="edu-header">
                    <span class="edu-school">{{ edu.school }}</span>
                    <span class="edu-time">{{ edu.startDate }} - {{ edu.endDate }}</span>
                  </div>
                  <div class="edu-major">{{ edu.major }}</div>
                  <div class="edu-degree">{{ edu.degree }}</div>
                </div>
                <div v-else class="empty-tip">暂无教育背景信息</div>
              </div>

              <!-- 工作经历 -->
              <div class="section">
                <h3>工作经历</h3>
                <div v-if="resume.workExperience && resume.workExperience.length > 0" v-for="(exp, index) in resume.workExperience" :key="index" class="exp-item">
                  <div class="exp-header">
                    <span class="exp-company">{{ exp.company }}</span>
                    <span class="exp-time">{{ exp.startDate }} - {{ exp.endDate }}</span>
                  </div>
                  <div class="exp-position">{{ exp.position }}</div>
                  <div class="exp-duties">
                    <p v-for="(duty, idx) in exp.duties" :key="idx" class="duty-item">- {{ duty }}</p>
                  </div>
                </div>
                <div v-else class="empty-tip">暂无工作经历信息</div>
              </div>

              <!-- 项目经历 -->
              <div class="section">
                <h3>项目经历</h3>
                <div v-if="resume.projects && resume.projects.length > 0" v-for="(project, index) in resume.projects" :key="index" class="project-item">
                  <div class="project-header">
                    <span class="project-name">{{ project.name }}</span>
                    <span class="exp-time">{{ project.startDate }} - {{ project.endDate }}</span>
                  </div>
                  <div class="project-description">{{ project.description }}</div>
                  <div class="project-responsibility">
                    <p v-for="(resp, idx) in project.responsibility" :key="idx" class="resp-item">- {{ resp }}</p>
                  </div>
                </div>
                <div v-else class="empty-tip">暂无项目经历信息</div>
              </div>

              <!-- 技能专长 -->
              <div class="section">
                <h3>技能专长</h3>
                <div v-if="resume.skills && resume.skills.length > 0" class="skills">
                  <el-tag v-for="(skill, index) in resume.skills" :key="index" size="medium">{{ skill }}</el-tag>
                </div>
                <div v-else class="empty-tip">暂无技能信息</div>
              </div>

              <!-- 自我介绍 -->
              <div class="section">
                <h3>自我介绍</h3>
                <div class="self-intro" v-if="resume.selfIntroduction">{{ resume.selfIntroduction }}</div>
                <div v-else class="empty-tip">暂无自我介绍信息</div>
              </div>
            </div>
          </el-card>

          <div class="action-buttons">
            <el-button type="primary" @click="startEditResume">编辑简历</el-button>
          </div>
        </div>

        <!-- 制作简历页面 -->
        <div v-if="activeIndex == 2" class="resume-maker">
          <el-card class="maker-card">
            <el-tabs v-model="activeTab" type="card">
              <el-tab-pane label="基本信息" name="basic">
                <el-form :model="resume" :rules="basicRules" ref="basicFormRef">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="resume.name" placeholder="请输入姓名" />
                  </el-form-item>
                  <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="resume.gender">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="出生日期" prop="birthDate">
                    <el-date-picker
                        v-model="resume.birthDate"
                        type="date"
                        placeholder="选择出生日期"
                        style="width: 100%"
                        value-format="YYYY/MM/DD"
                    />
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="resume.phone" placeholder="请输入联系电话" />
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="resume.email" placeholder="请输入邮箱" />
                  </el-form-item>
                  <el-form-item label="联系地址" prop="address">
                    <el-input v-model="resume.address" placeholder="请输入联系地址" />
                  </el-form-item>
                  <el-form-item label="求职意向" prop="jobIntention">
                    <el-input v-model="resume.jobIntention" placeholder="请输入求职意向" />
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="教育背景" name="education">
                <el-form :model="resume" label-width="100px">
                  <el-form-item label="教育经历">
                    <el-button type="primary" plain @click="addEducation">添加教育经历</el-button>
                  </el-form-item>
                  <el-form-item v-for="(edu, index) in resume.education" :key="index">
                    <div class="edu-form" style="border: 1px solid #eee; padding: 10px;">
                      <el-row :gutter="20">
                        <el-col :span="9">
                          <el-input v-model="edu.school" placeholder="学校名称" />
                        </el-col>
                        <el-col :span="10">
                          <!-- <el-input v-model="edu.startYear" placeholder="开始年份--结束年份" /> -->
                          <el-date-picker
                            v-model="edu.date"
                            type="monthrange"
                            range-separator="到"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="YYYY年MM月"
                            value-format="YYYY/MM"
                          />
                        </el-col>
                      </el-row>
                      <el-row :gutter="20" style="margin-top: 10px">
                        <el-col :span="12">
                          <el-input v-model="edu.major" placeholder="专业" />
                        </el-col>
                        <el-col :span="12">
                          <el-input v-model="edu.degree" placeholder="学位" />
                        </el-col>
                      </el-row>
                      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
                        <el-button style="margin-top: 10px" type="danger" plain @click="removeEducation(index)">删除</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="工作经历" name="experience">
                <el-form :model="resume" label-width="100px">
                  <el-form-item label="工作经历">
                    <el-button type="primary" plain @click="addWorkExperience">添加工作经历</el-button>
                  </el-form-item>
                  <el-form-item v-for="(exp, index) in resume.workExperience" :key="index">
                    <div class="exp-form" style="border: 1px solid #eee; padding: 10px;">
                      <el-row :gutter="20">
                        <el-col :span="9">
                          <el-input v-model="exp.company" placeholder="公司名称" />
                        </el-col>
                        <el-col :span="10">
                          <!-- <el-input v-model="exp.startDate" placeholder="开始日期--结束日期" /> -->
                           <el-date-picker
                              v-model="exp.date"
                              type="monthrange"
                              range-separator="到"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              format="YYYY年MM月"
                              value-format="YYYY/MM"
                            />
                        </el-col>
                      </el-row>
                      <el-form-item label="职位" style="margin-top: 10px">
                        <el-input v-model="exp.position" placeholder="职位名称" />
                      </el-form-item>
                      <el-form-item label="工作职责" style="margin-top: 10px">
                        <el-input
                            v-model="exp.dutiesText"
                            type="textarea"
                            :rows="3"
                            placeholder="请输入工作职责，每行一条，用回车分隔"
                            @input="parseDuties(exp, $event.target.value)"
                        />
                      </el-form-item>
                      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
                        <el-button style="margin-top: 10px" type="danger" plain @click="removeWorkExperience(index)">删除</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="项目经历" name="projects">
                <el-form :model="resume" label-width="100px">
                  <el-form-item label="项目经历">
                    <el-button type="primary" plain @click="addProject">添加项目经历</el-button>
                  </el-form-item>
                  <el-form-item v-for="(project, index) in resume.projects" :key="index">
                    <div class="project-form" style="border: 1px solid #eee; padding: 10px;" >
                      <el-row :gutter="20">
                        <el-col :span="9">
                          <el-input v-model="project.name" placeholder="项目名称" />
                        </el-col>
                        <el-col :span="10">
                          <!-- <el-input v-model="project.duration" placeholder="项目周期" /> -->
                          <el-date-picker
                              v-model="project.date"
                              type="monthrange"
                              range-separator="到"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              format="YYYY年MM月"
                              value-format="YYYY/MM"
                            />
                        </el-col>
                      </el-row>
                      <el-form-item label="项目描述"  style="margin-top: 10px">
                        <el-input
                            v-model="project.description"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入项目描述"
                        />
                      </el-form-item>
                      <el-form-item label="项目职责" style="margin-top: 10px">
                        <el-input
                            v-model="project.responsibilityText"
                            type="textarea"
                            :rows="3"
                            placeholder="请输入项目职责，每行一条，用回车分隔"
                            @input="parseResponsibility(project, $event.target.value)"
                        />
                      </el-form-item>
                      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
                        <el-button type="danger" plain @click="removeProject(index)">删除</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="技能专长" name="skills">
                <el-form :model="resume" label-width="100px">
                  <el-form-item label="技能标签">
                    <el-input
                        v-model="skillInput"
                        placeholder="输入技能，按回车添加"
                        @keyup.enter.native="addSkill"
                        class="skill-input"
                    />
                    <button @click="addSkill">添加</button>
                  </el-form-item>
                  <el-form-item label="已添加技能">
                    <el-tag
                        v-for="(skill, index) in resume.skills"
                        :key="index"
                        closable
                        @close="removeSkill(index)"
                        style="margin-right: 5px"
                    >
                      {{ skill }}
                    </el-tag>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="自我介绍" name="selfIntro">
                <el-form :model="resume" label-width="100px">
                  <el-form-item label="自我介绍">
                    <el-input
                        v-model="resume.selfIntroduction"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入自我介绍内容"
                    />
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>

            <div class="maker-actions">
              <el-button @click="cancelEdit">取消</el-button>
              <el-button type="primary" @click="saveResume">保存简历</el-button>
              <el-button type="success" @click="previewResume">预览简历</el-button>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog v-model="previewVisible" title="简历预览" width="70%" center>
      <div class="preview-content">
        <div class="resume-preview">
          <div class="resume-header">
            <h2>{{ resume.name }}</h2>
            <p class="resume-title">求职意向：{{ resume.jobIntention || '未填写' }}</p>
          </div>

          <div class="resume-content">
            <!-- 基本信息 -->
            <div class="section">
              <h3>基本信息</h3>
              <div class="info-row">
                <span>姓名：{{ resume.name }}</span>
                <span>性别：{{ getGenderText(resume.gender) }}</span>
              </div>
              <div class="info-row">
                <span>电话：{{ resume.phone || '未填写' }}</span>
                <span>邮箱：{{ resume.email || '未填写' }}</span>
              </div>
              <div class="info-row">
                <span>出生日期：{{ resume.birthDate || '未填写' }}</span>
                <span>地址：{{ resume.address || '未填写' }}</span>
              </div>
            </div>

            <!-- 教育背景 -->
            <div class="section">
              <h3>教育背景</h3>
              <div v-if="resume.education && resume.education.length > 0" v-for="(edu, index) in resume.education" :key="index" class="edu-item">
                <div class="edu-header">
                  <span class="edu-school">{{ edu.school }}</span>
                  <span class="edu-time">{{ edu.startDate }} - {{ edu.endDate }}</span>
                </div>
                <div class="edu-major">{{ edu.major }}</div>
                <div class="edu-degree">{{ edu.degree }}</div>
              </div>
              <div v-else class="empty-tip">暂无教育背景信息</div>
            </div>

            <!-- 工作经历 -->
            <div class="section">
              <h3>工作经历</h3>
              <div v-if="resume.workExperience && resume.workExperience.length > 0" v-for="(exp, index) in resume.workExperience" :key="index" class="exp-item">
                <div class="exp-header">
                  <span class="exp-company">{{ exp.company }}</span>
                  <span class="exp-time">{{ exp.startDate }} - {{ exp.endDate }}</span>
                </div>
                <div class="exp-position">{{ exp.position }}</div>
                <div class="exp-duties">
                  <p v-for="(duty, idx) in exp.duties" :key="idx" class="duty-item">- {{ duty }}</p>
                </div>
              </div>
              <div v-else class="empty-tip">暂无工作经历信息</div>
            </div>

            <!-- 项目经历 -->
            <div class="section">
              <h3>项目经历</h3>
              <div v-if="resume.projects && resume.projects.length > 0" v-for="(project, index) in resume.projects" :key="index" class="project-item">
                <div class="project-header">
                  <span class="project-name">{{ project.name }}</span>
                  <!-- <span class="project-time">{{ project.duration }}</span> -->
                  <span class="project-time">{{ project.startDate }} - {{ project.endDate }}</span>
                </div>
                <div class="project-description">{{ project.description }}</div>
                <div class="project-responsibility">
                  <p v-for="(resp, idx) in project.responsibility" :key="idx" class="resp-item">- {{ resp }}</p>
                </div>
              </div>
              <div v-else class="empty-tip">暂无项目经历信息</div>
            </div>

            <!-- 技能专长 -->
            <div class="section">
              <h3>技能专长</h3>
              <div v-if="resume.skills && resume.skills.length > 0" class="skills">
                <el-tag v-for="(skill, index) in resume.skills" :key="index" size="medium">{{ skill }}</el-tag>
              </div>
              <div v-else class="empty-tip">暂无技能信息</div>
            </div>

            <!-- 自我介绍 -->
            <div class="section">
              <h3>自我介绍</h3>
              <div class="self-intro" v-if="resume.selfIntroduction">{{ resume.selfIntroduction }}</div>
              <div v-else class="empty-tip">暂无自我介绍信息</div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewVisible = false">关闭</el-button>
          <el-button type="primary" @click="downloadResume">下载简历</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { saveResumeApi, getResumeApi } from '../../api/jobSeeker'

// 导航激活状态
const activeIndex = ref(1)
const activeTab = ref('basic')

// 技能输入
const skillInput = ref('')

// 预览弹窗
const previewVisible = ref(false)

// 表单引用
const basicFormRef = ref(null)

// 基本信息表单规则
const basicRules = ref({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  email: [{ message: '请输入正确的邮箱', trigger: 'blur', type: 'email' }]
})

// 简历数据（匹配数据库表结构，直接使用数组存储）
const resume = ref({
  id: null,
  userId: null,
  name: '',
  gender: 1,
  birthDate: '',
  phone: '',
  email: '',
  address: '',
  education: [], // 直接使用数组存储教育背景
  workExperience: [], // 直接使用数组存储工作经历
  skills: [], // 直接使用数组存储技能
  projects: [], // 直接使用数组存储项目经历
  selfIntroduction: '',
  createTime: null,
  updateTime: null,
  jobIntention: ''
})
// 侦听education
watch(() => resume.value.education, (newVal, oldVal) => {
  if(resume.value.education && resume.value.education.length > 0){
    resume.value.education.forEach((item) => {
      if(item.date && item.date.length == 2){
        item.startDate = item.date[0]
        item.endDate = item.date[1]
      }else{
        item.startDate = ''
        item.endDate = ''
      }
    })
  }
}, {deep: true})
// 侦听workExperience
watch(() => resume.value.workExperience, (newVal, oldVal) => {
  if(resume.value.workExperience && resume.value.workExperience.length > 0){
    resume.value.workExperience.forEach((item) => {
      if(item.date && item.date.length == 2){
        item.startDate = item.date[0]
        item.endDate = item.date[1]
      }else{
        item.startDate = ''
        item.endDate = ''
      }
    })
  }
}, {deep: true})
// 侦听projects
watch(() => resume.value.projects, (newVal, oldVal) => {
  if(resume.value.projects && resume.value.projects.length > 0){
    resume.value.projects.forEach((item) => {
      if(item.date && item.date.length == 2){
        item.startDate = item.date[0]
        item.endDate = item.date[1]
      }else{
        item.startDate = ''
        item.endDate = ''
      }
    })
  }
}, {deep: true})
// 导航切换
const handleSelect = (key) => {
  activeIndex.value = key
  if (key === '2') {
    // 确保编辑时数据是最新的
    resetEditForm()
  }
}

// 重置编辑表单
const resetEditForm = () => {
  // 确保编辑表单与展示数据一致
  skillInput.value = ''
}

// 编辑简历
const startEditResume = () => {
  activeIndex.value = 2
  // 滚动到表单顶部，提升用户体验
  document.querySelector('.maker-card')?.scrollIntoView({ behavior: 'smooth' })
}

// 添加教育经历
const addEducation = () => {
  resume.value.education.push({
    school: '',
    startDate: '',
    endDate: '',
    date: [],
    major: '',
    degree: ''
  })
}

// 删除教育经历
const removeEducation = (index) => {
  if (resume.value.education.length > 1) {
    resume.value.education.splice(index, 1)
  } else {
    ElMessage.warning('至少保留一条教育经历')
  }
}

// 添加工作经历
const addWorkExperience = () => {
  resume.value.workExperience.push({
    company: '',
    startDate: '',
    endDate: '',
    date: [],
    position: '',
    duties: [],
    dutiesText: ''
  })
}

// 删除工作经历
const removeWorkExperience = (index) => {
  if (resume.value.workExperience.length > 1) {
    resume.value.workExperience.splice(index, 1)
  } else {
    ElMessage.warning('至少保留一条工作经历')
  }
}

// 添加项目经历
const addProject = () => {
  resume.value.projects.push({
    name: '',
    startDate: '',
    endDate: '',
    date: [],
    description: '',
    responsibility: [],
    responsibilityText: ''
  })
}

// 删除项目经历
const removeProject = (index) => {
  if (resume.value.projects.length > 1) {
    resume.value.projects.splice(index, 1)
  } else {
    ElMessage.warning('至少保留一条项目经历')
  }
}

// 解析工作职责
const parseDuties = (exp, value) => {
  exp.dutiesText = value
  exp.duties = value.split('\n').filter(duty => duty.trim() !== '')
}

// 解析项目职责
const parseResponsibility = (project, value) => {
  project.responsibilityText = value
  project.responsibility = value.split('\n').filter(resp => resp.trim() !== '')
}

// 添加技能
const addSkill = (e) => {
  e.preventDefault()
  if (skillInput.value.trim() !== '') {
    if (!resume.value.skills.includes(skillInput.value.trim())) {
      resume.value.skills.push(skillInput.value.trim())
      skillInput.value = ''
    } else {
      ElMessage.warning('该技能已添加')
    }
  }
}

// 删除技能
const removeSkill = (index) => {
  resume.value.skills.splice(index, 1)
}
// 页面加载时从后端获取简历
onMounted(() => {
  // 从后端获取数据
  queryResume()
})
//查询简历
const queryResume = async () => {
  const result = await getResumeApi()
  if(result.code){
    resume.value = result.data
  }else{
    ElMessage.error(result.message)
  }
}
// 保存简历
const saveResume = () => {
  basicFormRef.value?.validate(async (valid) => {
    if (valid) {
      // 保存到本地存储和后端
      const result = await saveResumeApi(resume.value)
      if(result.code){
        queryResume()
        activeIndex.value = 2
        ElMessage.success('简历保存成功')
      }
      // localStorage.setItem('personalResume', JSON.stringify(resume.value))
    }
  })
}

// 取消编辑
const cancelEdit = () => {
  ElMessageBox.confirm('确定取消编辑吗？未保存的更改将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    activeIndex.value = 1
    queryResume()
  }).catch(() => {
    // 取消操作
  })
}

// 预览简历
const previewResume = () => {
  basicFormRef.value?.validate((valid) => {
    if (valid) {
      previewVisible.value = true
    }
  })
}

// 下载简历
const downloadResume = () => {
  // 创建临时iframe生成PDF
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  document.body.appendChild(iframe)

  // 获取简历内容
  const resumeContent = document.querySelector('.resume-preview').innerHTML

  // 设置iframe内容
  iframe.contentDocument.open()
  iframe.contentDocument.write(`
    <html>
      <head>
        <title>${resume.value.name} - 个人简历</title>
        <style>
          body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 0px; line-height: 1.6; }
          .resume-header { background-color: #409EFF; color: white; padding: 0px; border-radius: 4px; margin-bottom: 0px; }
          .resume-header h2 { font-size: 24px; margin: 0; }
          .resume-title { font-size: 16px; opacity: 0.9; margin-top: 10px; }
          .section { margin-bottom: 30px; }
          .section h3 { color: #304156; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; margin-bottom: 20px; }
          .info-row { display: flex; flex-wrap: wrap; gap: 30px 20px; margin-bottom: 15px; }
          .info-row span { color: #606266; }
          .edu-item, .exp-item, .project-item { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dashed #ebeef5; }
          .edu-item:last-child, .exp-item:last-child, .project-item:last-child { border-bottom: none; padding-bottom: 0; }
          .edu-header, .exp-header, .project-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
          .edu-school, .exp-company, .project-name { font-weight: bold; color: #304156; }
          .edu-time, .exp-time, .project-time { color: #909399; font-size: 14px; }
          .edu-major, .exp-position { font-size: 16px; color: #606266; margin-bottom: 5px; }
          .edu-degree { color: #909399; font-size: 14px; }
          .exp-duties, .project-responsibility { margin-top: 10px; padding-left: 15px; border-left: 2px solid #409EFF; }
          .duty-item, .resp-item { color: #606266; margin-bottom: 5px; }
          .self-intro { line-height: 1.8; color: #606266; padding: 15px; background-color: #f5f7fa; border-radius: 4px; }
          .empty-tip { color: #909399; padding: 15px; background-color: #f5f7fa; border-radius: 4px; text-align: center; }
          .skills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
          .el-tag { background-color: #409EFF; color: white; padding: 6px 12px; border-radius: 4px; font-size: 14px; }

          /* 响应式适配 */
          @media print {
            .resume-app, .header, .action-buttons, .maker-actions { display: none; }
            .resume-preview { width: 100% !important; max-width: none !important; }
          }
        </style>
      </head>
      <body>
        <div class="resume-preview">${resumeContent}</div>
      </body>
    </html>
  `)
  iframe.contentDocument.close()

  // 使用html2pdf生成PDF
  const script = document.createElement('script')
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js'
  script.onload = () => {
    const opt = {
      margin: [-10, 20, 20, 20],
      filename: `${resume.value.name}_个人简历.pdf`,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2, letterRendering: true },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    }

    html2pdf().from(iframe.contentDocument.body).set(opt).save()

    // 移除临时元素
    setTimeout(() => {
      document.body.removeChild(iframe)
      document.body.removeChild(script)
    }, 1000)
  }
  document.body.appendChild(script)

  previewVisible.value = false
  ElMessage.success('简历下载成功')
}



// 获取性别文本
const getGenderText = (gender) => {
  return gender === 1 ? '男' : gender === 2 ? '女' : '未填写'
}
</script>

<style scoped>
:deep(.el-dialog__body) {
  padding: 0 !important;
}
/* 样式部分与原代码相同，未做修改 */
.resume-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #409EFF;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu {
  width: auto;
  border-bottom: none;
}

.menu .el-menu-item {
  color: #bfcbd9;
  font-size: 16px;
  transition: all 0.3s;
}

.menu .el-menu-item.is-active {
  color: #fff;
  border-bottom: 2px solid #fff;
}

.main-content {
  flex: 1;
  width: 100%;
  background-color: #f5f7fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
}

.resume-view, .resume-maker {
  width: 100%;
}

.resume-card, .maker-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #fff;
  transition: all 0.3s;
}

.resume-card:hover, .maker-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.resume-header {
  padding: 30px;
  background-color: #409EFF;
  color: white;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.resume-header h2 {
  font-size: 28px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.resume-title {
  font-size: 16px;
  opacity: 0.8;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.resume-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transform-origin: top right;
}

.resume-content {
  padding: 0 30px 30px;
}

.section {
  margin-bottom: 30px;
}

.section h3 {
  color: #304156;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
  position: relative;
}

.section h3::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background-color: #409EFF;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  color: #606266;
  flex-wrap: wrap;
}

.info-row span {
  margin-right: 30px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.info-row span::before {
  content: '•';
  color: #409EFF;
  margin-right: 8px;
}

.edu-item, .exp-item, .project-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ebeef5;
  transition: all 0.3s;
}

.edu-item:last-child, .exp-item:last-child, .project-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.edu-item:hover, .exp-item:hover, .project-item:hover {
  background-color: #fafbfc;
  transform: translateX(5px);
}

.edu-header, .exp-header, .project-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.edu-school, .exp-company, .project-name {
  font-weight: bold;
  color: #304156;
}

.edu-time, .exp-time, .project-time {
  color: #909399;
  font-size: 14px;
}

.edu-major, .exp-position {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
}

.edu-degree {
  color: #909399;
  font-size: 14px;
}

.exp-duties, .project-responsibility {
  margin-top: 10px;
}

.duty-item, .resp-item {
  color: #606266;
  margin-left: 20px;
  line-height: 1.6;
  position: relative;
}

.duty-item::before, .resp-item::before {
  content: '•';
  color: #409EFF;
  position: absolute;
  left: -15px;
  top: 0;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.maker-card {
  background-color: white;
}

.maker-actions {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid #ebeef5;
  margin-top: 20px;
}

.maker-actions .el-button {
  margin-left: 10px;
}

.skill-input {
  width: 300px;
  margin-right: 10px;
}

.preview-content {
  padding: 30px;
  background-color: white;
}

.resume-preview {
  max-width: 800px;
  margin: 0 auto;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.empty-tip {
  color: #909399;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

/* 表单动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animated {
  animation: fadeIn 0.3s ease-out forwards;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .container {
    padding: 30px 20px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    margin-bottom: 10px;
  }

  .resume-header {
    padding: 20px;
  }

  .resume-content {
    padding: 0 20px 20px;
  }

  .info-row {
    flex-direction: column;
  }

  .info-row span {
    margin-right: 0;
    margin-bottom: 5px;
  }

  .edu-header, .exp-header, .project-header {
    flex-direction: column;
  }

  .edu-time, .exp-time, .project-time {
    margin-top: 5px;
  }

  .maker-actions {
    flex-direction: column;
  }

  .maker-actions .el-button {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
</style>